$(document).ready(function(){
	var fieldsNum = 1;

	var x=true;
	var count = $(".form-row").size();
	var actionViewTypeId = "actionViewType" + count;
$(".actionViewType").change(function(){

		if( $(this).attr("value") == "select" || $(this).attr("value") == "checkbox" || $(this).attr("value") == "radio" )
			{$("#predefinedMultipleValues1").css("display", "block");}
		if( $(this).attr("value") == "text" || $(this).attr("value") == "textarea" )
			{$("#predefinedMultipleValues1").css("display", "none");}

		$('#addValue1').click(function(){
			var countAddValues = $('#predefinedMultipleValues1').find('.TB').size() + 1;
			$(this).before('<label>Value #'+countAddValues+': </label><input type="text" class="TB" name="field1value'+countAddValues+'"/>');
		});	
});
$("#addField").click(function(){
	var count = $(".form-row").size();
	var actionTypeNameId = "fieldName" + count;
	var actionDataTypeId = "actionDataType" + count;
	var actionValidationTypeId = "actionValidationType" + count;
	var actionViewTypeId = "actionViewType" + count;
	var predefinedMultipleValuesId = "predefinedMultipleValues" + count;
	var addValueId ='addValue'+count;
	var htmlContent ='<div class="form-row">' +
    '<h4>Field #'+ count +'</h4>'+
    '<div class="input-col">'+
        '<label>Field Name: </label>'+
        '<input type="text" class="TB" name="'+actionTypeNameId+'"/>'+
    '</div>'+
    '<div class="input-col" style="visibility: hidden;">'+
    '<label>hidden</label>'+
    '<input type="text" class="TB"/>'+
    '</div>'+
    '<div class="input-col">'+
        '<label>Field Data Type: </label>'+
        '<select class="TB" name="'+actionDataTypeId+'">'+
        '<option value="String">Text</option>'+
        '<option value="Integer">Number</option>'+
        '<option value="Date">Date</option>'+
        '</select>'+
    '</div>'+
    '<div class="input-col">'+
        '<label>Field Validation Type: </label>'+
        '<select class="TB" name="'+actionValidationTypeId+'">'+
        '<option value="notEmptyString">Not Empty Text</option>'+
        '<option value="optionalString">Optional Text</option>'+
        '<option value="scheduledDate">Scheduled Date</option>'+
        '</select>'+
    '</div>'+
    '<div class="input-col">'+
        '<label>Field View Type: </label>'+
        '<select class="TB" name="'+actionViewTypeId+'" id="' + actionViewTypeId +'">'+
        '<option value="text">Text Box</option>'+
        '<option value="textarea">Text Area</option>'+
        '<option value="select">Menu (List)</option>'+
        '<option value="checkbox">Check Box</option>'+
        '<option value="radio">Radio Buttons</option>'+
        '</select>'+
    '</div>'+
'<div class="predefinedMultipleValues" id="'+ predefinedMultipleValuesId +'">'+
        '<label>Value #1: </label>'+
        '<input type="text" class="TB" name="field'+count+'value1"/>'+
        '<label>Value #2: </label>'+
        '<input type="text" class="TB" name="field'+count+'value2"/>'+
		'<a href="#" id="'+addValueId+'">Add another value</a>'+
		'<input type="hidden" name="field'+count+'ValuesCount" value="2" id="field'+count+'ValuesCount"/>'+
'</div>'+
'</div>';
	$(this).before(htmlContent);
	var jQActionViewTypeId = '#' + actionViewTypeId;
	var jQpredefinedMultipleValuesId = '#' + predefinedMultipleValuesId;
	//alert('jQActionViewTypeId changed: ' + jQActionViewTypeId);
	$(jQActionViewTypeId).change(function(){
		if( $(this).attr("value") == "select" || $(this).attr("value") == "checkbox" || $(this).attr("value") == "radio" )
			{$(jQpredefinedMultipleValuesId).css("display", "block");}
		if( $(this).attr("value") == "text" || $(this).attr("value") == "textarea" )
			{$(jQpredefinedMultipleValuesId).css("display", "none");}
	});
	var jQaddValueId = '#' + addValueId;
	$(jQaddValueId).click(function(){
		var countValue = $(jQpredefinedMultipleValuesId).find('.TB').size() + 1;
		$(this).before('<label>Value #'+countValue+': </label><input type="text" class="TB" name="field'+count+'value'+countValue+'"/>');
	});
	$('.new-action-type-form').submit(function(){
		fieldsNum = $(".form-row").size() - 1;
		$('#fieldsNum').attr('value', fieldsNum);
		if(x == true){
		for(i=1;i<=fieldsNum;i++){
			if(i==fieldsNum)
				x=false;
			var fieldValuesCount = $("#predefinedMultipleValues" + i).find('.TB').size();
			var curr = '#field'+ i +'ValuesCount';
			//alert("fieldValuesCount: " + fieldValuesCount + ' curr: ' + curr);
			$(curr).attr('value',fieldValuesCount);
		}
		}
	});
});

//$('.new-action-type-form').submit(function(){
//	alert(fieldsNum);
//	var x=0;
//	if(x<fieldsNum){
//	for(i=0;i<=fieldsNum;i++){
//		alert("xxx");
//	}
//	}
//});

});